<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>注册与登录</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
            background-image: url('photo/img_4.png'); /* 修正背景图片路径 */
            background-size: cover;
            background-repeat: no-repeat;
        }

        #greeting {
            font-size: 150px;
            text-align: center;
            color: transparent;
            -webkit-text-stroke: thin #5b0961;
            transition: opacity 0.5s ease-in-out;
        }

        #phoneNumber2, #password2, #username, #phoneNumber, #password {
            border-radius: 10px; /* 这里设置为 10px，你可以根据需要调整圆角的大小 */
            /* 其他样式 */
        }

        .text-font {
            font-family: 'Comic Sans MS', sans-serif;
            font-size: 18px;
            font-weight: 800;
        }

        .container {
            display: flex;
            width: 1027px;
            height: 512px;
            overflow: hidden;
            border: 1px solid #ccc;
            background-image: url('photo/img_4.png'); /* 修正背景图片路径 */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .login,
        .register {
            width: 50%;
            padding: 20px;
            box-sizing: border-box;
            transition: transform 0.3s ease-in-out;
            background-size: cover;
        }

        .spacing {
            margin-bottom: 10px; /* 设置底部间距为10px，可以根据需要进行调整 */
        }

        .login {
            background-image: url('photo/img_5.png'); /* 修正登录背景图片路径 */
        }

        .register {
            background-image: url('photo/img_6.png'); /* 修正注册背景图片路径 */
            transform: translateX(100%);
        }

        .container.register-active .login {
            transform: translateX(-100%);
        }

        .container.register-active .register {
            transform: translateX(0);
        }

        .toggle-btn button {
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease-in-out;
        }

        .toggle-btn button:hover {
            background-image: url('photo/img_4.png'); /* 修正按钮背景图片路径 */
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            padding: 10px;
        }

        .inputBox {
            position: relative;
            width: 250px;
        }

        .inputBox input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 1em;
            outline: none;
        }

        .inputBox span {
            position: absolute;
            left: 0;
            top: 0;
            padding: 10px;
            color: #ccc;
            font-size: 1em;
            pointer-events: none;
            transition: all 0.5s;
        }

        .inputBox input:valid ~ span,
        .inputBox input:focus ~ span {
            color: orange;
            transform: translateX(10px) translateY(-7px);
            font-size: 0.65em;
            padding: 0 10px;
            background-color: #fff;
        }

    </style>
</head>
<body>
<div style="text-align: center;">
    <h1 id="greeting" class="text-font">Hello</h1>
    <div class="container" id="container">
        <div class="login">
            <h2 style="color: aqua">登录</h2>
            <div>
                <form action="Servlet" method="post">
                    <div>
                        <div class="inputBox" style="text-align: center"><input type="text" id="phoneNumber2"
                                                                                name="phoneNumber2" required><span>手机号/PhoneNumber</span>
                        </div>
                        <br><br>
                    </div>
                    <div class="inputBox"><input type="password" id="password2" name="password2" required><span>密码/Password</span>
                    </div>
                    <br><br>
                    <button style="font-size: 30px ;color: purple"><b>提交</b></button>
                    <button onclick="clearForm()" style="font-size: 30px ;color:fuchsia"><b>清空</b></button>
                </form>
                <button onclick="toggleContainer()" style="font-size: 30px" class="spacing">还没有账号?点击注册</button>
            </div>
        </div>
        <div class="register">
            <h2 style="color: chartreuse">Register</h2>
            <form action="RegisterServlet" method="post">
                <div id="registerForm">
                    <div>
                        <div class="inputBox" style="text-align: center"><input type="text" id="username"
                                                                                name="username" required><span>用户名/UserName</span>
                        </div>
                        <br><br>
                    </div>
                    <br><br>
                    <div>
                        <div class="inputBox" style="text-align: center"><input type="text" id="phoneNumber"
                                                                                name="phoneNumber" required><span>手机号/PhoneNumber</span>
                        </div>
                        <br><br>
                    </div>
                    <br><br>
                    <div class="inputBox"><input type="password" id="password" name="password" required><span>密码/Password</span>
                    </div>
                    <br><br><br><br>
                    <button style="font-size: 30px  ;color: purple">提交
                    </button>
                    <button onclick="clearForm()" style="font-size: 30px ;color:fuchsia">清空</button>
                </div>
            </form>
            <button onclick="toggleContainer()" style="font-size: 30px">已经有账号?点击登录</button>
        </div>
    </div>
</div>
<script type="text/javascript">
    function clearForm() {
        // 清空登录表单
        document.getElementById('phoneNumber2').value = '';
        document.getElementById('password2').value = '';
        // 清空注册表单
        document.getElementById('username').value = '';
        document.getElementById('phoneNumber').value = '';
        document.getElementById('password').value = '';
    }

    function toggleContainer() {
        const container = document.getElementById('container');
        container.classList.toggle('register-active');
    }


    window.onload = function () {
        const greetingElement = document.getElementById("greeting")
        const greetings = [{text: "Hello", color: "rgb(0,159,255)"},
            {text: "你好", color: "rgb(255,0,6)"},
            {text: "привет", color: "green"},
            {text: "Bonjour", color: "orange"},
            {text: "Hallo", color: "purple"},
            {text: "こんにちは", color: "pink"},
            {text: "Hola", color: "brown"},
            {text: "Здравствуйте", color: "gray"},
            {text: "नमस्ते", color: "teal"},
            {text: "안녕하세요", color: "violet"},
            {text: "Ciao", color: "gold"},];
        let currentGreetingIndex = 0

        function changeGreeting() {
            greetingElement.style.opacity = "0"
            setTimeout(function () {
                greetingElement.textContent = greetings[currentGreetingIndex].text
                greetingElement.style.color = greetings[currentGreetingIndex].color
                greetingElement.style.opacity = "1"
                currentGreetingIndex = (currentGreetingIndex + 1) % greetings.length
            }, 500)
        }

        changeGreeting()
        setInterval(changeGreeting, 2000)
    }

</script>
</body>
</html>